import { defineComponent, ref } from 'vue'

// ref在template模式下会自动解包，tsx下不会
// 插值使用 单括号 {}
// v-if不支持，可以使用三元表达式去代替
// v-for不支持，map代替
// v-bind使用 {} 代替，如果需要绑定多个属性，使用...操作符
// prop和emit
// 插槽slots
// v-show,v-model支持

const otherComp = (_, { slots }) => (<>
  <div>{slots.default ? slots.default() : '默认值'}</div>
  <div>{slots.foo?.()}</div>
  <div>{slots.footer({
    text: '具名插槽传值'
  })}</div>
</>)

interface Props {
  name?: string
}
export default defineComponent({
  props: {
    name: String
  },
  emits: ['change-param'],
  setup(props: Props, { emit }) {
    const attr = {
      a: '属性1',
      b: '属性2'
    }
    const flag = ref(false)
    const arr = ['11', '22', '33', '44', '55']
    const fn = ((para: string) => {
      console.log('触发了', para)
      emit('change-param', para)
    })
    const slot = {
      default: () => (<div>默认插槽default slots</div>),
      foo: () => (<div>具名插槽foo slots</div>),
      footer: () => (<div text={props?.name}>具名插槽</div>)
    }
    const inputVal = ref<string>('')
    return () => (
      <>
        <div {...attr}>绑定多个属性</div>
        <div v-show={flag.value}>setup模式</div>
        <div>{flag.value ? 'true' : 'false'}</div>
        {arr.map(ele => <h2 onClick={() => fn(ele)} name={ele}>{ele}</h2>)}
        <hr />
        <div>props: {props?.name}</div>
        <hr />
        <otherComp v-slots={slot}></otherComp>
        <hr />
        <input v-model={inputVal.value} />
        <div>inputVal: {inputVal.value}</div>
      </>
    )
  }
})